import {useEffect, useRef} from 'react';
import styled, {css} from 'styled-components';
import {gsap} from 'gsap';

const ImageContainer = styled.div`
    margin: 0 auto;
    display: grid;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: min(70vmin, 450px);
    height: min(70vmin, 450px);
    border-radius: 50%;
    background-size: cover;
    background-position: 50% 50%;
`;


interface ImageProps {
    $bgImage: string;
}

// 子元素样式
const ImageElement = styled.div<ImageProps>`
    transform-origin: inherit;
    position: relative;
    grid-area: 1 / 1 / 2 / 2;
    width: 100%;
    height: 100%;
    will-change: transform;
    border-radius: inherit;
    background-size: inherit;
    background-position: inherit;
    ${({$bgImage}) => css`
        background-image: url(${$bgImage});
    `}
`;

const ImageHover = ({
                        imageUrl = '',
                        repetitionCount = 4,
                        repetitionDuration = 0.5,
                        repetitionEase = 'power2.inOut',
                        repetitionStagger = 0,
                        repetitionScaleInterval = 0.1,
                        repetitionRotationInterval = 0,
                        repetitionOrigin = '50% 50%',
                    }) => {

    const containerRef = useRef<HTMLDivElement | null>(null);
    const elementRefs = useRef<(HTMLDivElement | null)[]>([]);
    const timelineRef = useRef<gsap.core.Timeline | null>(null);
    // 初始化 gsap 动画
    useEffect(() => {
        const innerElems = elementRefs.current;

        const getScaleValue = (i: number) => Math.max(1 - repetitionScaleInterval * i, 0);
        const getRotationValue = (i: number) => i * repetitionRotationInterval;

        gsap.set(containerRef.current, {transformOrigin: repetitionOrigin});

        timelineRef.current = gsap.timeline({paused: true}).to(innerElems, {
            scale: i => getScaleValue(i),
            rotation: i => getRotationValue(i),
            duration: repetitionDuration,
            ease: repetitionEase,
            stagger: repetitionStagger,
        }) as gsap.core.Timeline;

        const handleMouseEnter = () => {
            if (timelineRef.current) {
                timelineRef.current.play();
            }
        };

        const handleMouseLeave = () => {
            if (timelineRef.current) {
                timelineRef.current.reverse();
            }
        };
        const el = containerRef.current;
        el?.addEventListener('mouseenter', handleMouseEnter);
        el?.addEventListener('mouseleave', handleMouseLeave);

        return () => {
            el?.removeEventListener('mouseenter', handleMouseEnter);
            el?.removeEventListener('mouseleave', handleMouseLeave);
        };
    }, [
        repetitionCount,
        repetitionDuration,
        repetitionEase,
        repetitionStagger,
        repetitionScaleInterval,
        repetitionRotationInterval,
        repetitionOrigin,
    ]);

    return (
        <ImageContainer ref={containerRef} style={{backgroundImage: `url(${imageUrl})`}}>
            {[...Array(Math.max(2, repetitionCount))].map((_, i) => (
                <ImageElement
                    key={i}
                    $bgImage={imageUrl}
                    ref={(el: HTMLDivElement | null) => {
                        elementRefs.current[i] = el;
                    }}
                />
            ))}
        </ImageContainer>
    );
};

export default ImageHover;
